<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <title>Document</title>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 头部 -->
        {{include'./Public_documents/header.html'}}

        <!-- 左侧 -->
        {{include'./Public_documents/Left_menu.html'}}

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <span class="layui-breadcrumb" lay-separator=">">
                <a href="/">首页</a>
                <a href="/add">文章添加</a>
            </span>
            <div style="padding: 15px;">


                <form action="/insert" class="layui-form" method="post" enctype="multipart/form-data">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题： </label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="title" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label ">封面: </label>
                        <input type="file" name="img" id="img" style="display: none;" autocomplete="off">
                        <div class="layui-input-inline">
                            <button type="button" id="upload" class="layui-btn">上传图片</button>
                        </div>
                    </div>



                    <div id="imgWrap" class="layui-form-item" style="display: none;">
                        <label class="layui-form-label">预览： </label>
                        <div class="layui-input-inline">
                            <img src="" id="preview-img" width="150px">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label ">作者： </label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="author" autocomplete="off">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label ">审核： </label>
                        <div class="layui-input-block">
                            待审核<input type="radio" name="AudIt_status" value='0'>
                            审核通过<input type="radio" name="AudIt_status" value='1'>
                            审核失败<input type="radio" name="AudIt_status" value='2'>
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label ">分类 </label>
                        <div class="layui-input-inline">
                            <select name="cat_id" lay-verify="required">
                                <option value="0">请选择</option>
                                {{each cats item index}}
                                <option value="{{item.id}}">{{item.name}}</option>
                                {{/each}}

                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label "> 内容： </label>
                        <div class="layui-input-block">

                            <textarea name="content" cols="30" rows="10" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label "></label>
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-radius layui-btn-normal">添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/layui-v2.6.8/layui/layui.js"></script>
<script>
    //JS 
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', { icon: 0 });
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });
    });

    

    document.getElementById('upload').onclick = function () {
        document.getElementById('img').click()
    }
    document.getElementById('img').onchange = function () {
        let file = this.files[0]

        //判断是否有上传文件
        if (!file) {
            return
        }
        let fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = function (e) {
            document.getElementById('preview-img').src = this.result;
            document.getElementById('imgWrap').style.display = '';
        }
    }
</script>

</html>